<template>
    <div class="ArticleDetail" v-if="detailDatas.id">
      <div class="title_area">
        <img @click="backToArtcle"  class="bckBTN" :src="backIMG" alt="">
        <div>面经详情</div>
      </div>
      <div class="info_area">
      <h1>{{ detailDatas.stem }}</h1>
        <div class="artic_status">
            {{detailDatas.createdAt}} | {{detailDatas.views}} 浏览量 | {{detailDatas.likeCount}} 点赞数
        </div>
        <div class="User_info">
            <img :src="detailDatas.creatorAvatar" alt="">
            <span> {{detailDatas.creatorName}} </span>
        </div>
        <div class="content">
          {{detailDatas.content}}
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  export default {
      name:"ArticleDetail",
      data() {
        return {
          detailDatas:{},
          backIMG:require('@/assets/backBtn.png')
        }
      },
      async created() {
        // 方法一 
        // {data:{result}}多级解构
        const {data:{result}} =await axios.get(`https://mock.boxuegu.com/mock/3083/articles/${this.$route.query.id}`)
        this.detailDatas=result
        // 方法二 
        // const res =await axios.get("https://mock.boxuegu.com/mock/3083/articles")
        // const rows=res.data.result.rows
        // rows.forEach(items => {
        //   if (items.id===this.$route.query.id) {
        //     this.detailDatas=items
        //   }
        // });
      },
      methods: {
        backToArtcle(){
          this.$router.back()
        }
      },
  }
  </script>
  
  <style scoped>
  .info_area{
    padding-top: 50px;
  }
  .ArticleDetail{
    padding: 0 15px;
    display: flex;
  }
  .title_area{
    width: 400px;
    height: 40px;
    position: fixed;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content:center;
    background-color: white;
    border-bottom: 2px rgba(220, 220, 220, 0.472) solid;
  }
  .bckBTN{
    position: absolute;
    left: 0%;
    cursor: pointer;
  }
  .User_info ,.artic_status{
    font-size: 12px;
    color:gray;
  }
  .User_info{
    margin: 15px 0;
    display: flex;
    align-items: center;
  }
  .User_info>img{
    margin-right: 15px;
    width: 2em;
    height: 2em;
    object-fit: contain;
    border-radius: 50%;
  }
  </style>